<template>
	<view>
		<view class="tit borderBottom">
			<text v-text="currentTerm.termName"></text>
			<!-- <pickerModule :picker="picker" @change="pickerChange"></pickerModule> -->
			<picker :mode="picker.mode" :value="picker.value" @change="pickerChange" :range="picker.range" range-key="name" :name="picker.name">
				<view class="pickerInput">
					<text v-text="picker.text"></text>
					<icon class="iconfont iconarrow-right-copy-copy"></icon>
				</view>
			</picker>
			<!-- <text>第一周</text> -->
			<!-- <text>一学期</text> -->
		</view>
		<view class="tableCon">
			<view class="th">
				<view class="th-hr first"></view>
				<!-- 预留一个头部序号占位的空白 -->
				<view class="th-hr" v-for="(th, index) in header" :key="index">
					<text v-text="th.t"></text>
					<text v-text="th.d"></text>
				</view>
			</view>
			<view class="tBody">
				<view class="body-col first"><text class="col-item" v-for="(c, i) in classCount" :key="i" v-text="c"></text></view>
				<view class="body-col con" v-for="(cc, ci) in body.showClassList" :key="ci">
					<text v-for="(cn, cni) in cc" :key="cni" :class="cn.class" v-text="cn.text" @click="showInfo(cn)"></text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import pickerModule from '@/wxcomponents/form/picker.vue';
import userMixins from '@/libs/userMixins.js';
export default {
	mixins: [userMixins],
	data() {
		return {
			currentTerm: '',
			termWeeks: '',
			currentWeek: '',
			picker: {
				label: '周次',
				value: '',
				// required: true,
				mode: 'selector',
				name: 'courseName',
				range: '',
				text: ''
			},
			classCount: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], //每天多少节课
			header: [
				{
					t: '星期一',
					d: ''
				},
				{
					t: '星期二',
					d: ''
				},
				{
					t: '星期三',
					d: ''
				},
				{
					t: '星期四',
					d: ''
				},
				{
					t: '星期五',
					d: ''
				}
			],
			body: {
				//注：1,如果当天有课必须传8节课，且每节课都要写相应的课程名称，如果某一节课没课传空
				//    2,如果当天全部没课，直接传空数据
				orignClassList: [],
				//这个数据通过orginClassList调用formatClassList方法得到，转化后格式如下
				showClassList: []
			}
		};
	},
	async onLoad() {
		// this.fomatBodyData(this.body.orignClassList);
		this.currentTerm = await this.getCurrentTerm();
		this.termWeeks = await this.getCurrentWeeks();
		this.setWeeks();
		this.getClassDetail();
	},
	methods: {
		showInfo(e) {
			if (typeof e.text != 'undefined') {
				uni.showModal({
					title: '',
					content: `课名：${e.text} \r\n班级：${e.className} \r\n教室：${e.classroomName}\r\n教师：${e.teacherName}`,
					// content:"课名："+e.text+"班级："+e.classroomName+"\n"+"教师："+e.teacherName,
					showCancel: false
				});
			}
		},
		//获取当前学期
		async getCurrentTerm() {
			let resp = await this.$http.get({
				url: '/edu/term/getCurrentTermInfo'
			});
			this.currentWeek = resp.result.currentTermIndex;
			return resp.result;
		},
		//获取当前学周
		async getCurrentWeeks() {
			let resp = await this.$http.get({
				url: '/edu/term/getTermWeeks',
				data: {
					termId: this.currentTerm.id
				}
			});

			return resp.result;
		},
		//获取课程详情 学生和教师接口地址不同
		async getClassDetail() {
			let self = this;
			let caseMap = [
				{
					condition() {
						// 学生
						return self.calMenuShow('学生身份')
					},
					getClassDetailUrl: '/edu/timeTable/class/weChat/stuClassTable'
				},
				{
					condition() {
						// 班主任、教师
						return self.calMenuShow('班主任身份') || self.calMenuShow('普通老师身份')
					},
					getClassDetailUrl: '/edu/timeTable/teacher/weChat/teacherClassTable'
				}
			];
			let findOne = caseMap.filter(item => {
				return item.condition();
			})[0];
			if (!findOne) {
				alert(`getClassDetail方法出错`);
			}
			let resp = await this.$http.get({
				url: findOne.getClassDetailUrl,
				data: {
					weekIndex: this.picker.range[this.picker.value].id
				}
			});
			resp.result.courseTable.map((item, i) => {
				this.header[i].d = item.courseDate.substring(5);
			});
			resp.result.courseTable.map((item, i) => {
				this.body.orignClassList[i] = item.list.map(ele => {
					if (ele.courseName) {
						return {
							text: ele.courseName,
							classroomName: ele.classroomName,
							className: ele.className,
							teacherName: ele.teacherName
						};
					} else {
						return '';
					}
				});
			});
			this.fomatBodyData(this.body.orignClassList);
		},
		//设置学周列表
		setWeeks() {
			this.picker.range = this.termWeeks.map(item => {
				return {
					name: `第${item}周`,
					id: item
				};
			});
			this.picker.value = this.currentWeek - 1;
			this.picker.text = `第${this.currentWeek}周`;
		},
		//改变周次
		pickerChange(e) {
			this.picker.value = e.detail.value;
			this.picker.text = this.picker.range[e.detail.value].name;
			this.getClassDetail();
		},
		fomatBodyData(orignClassList) {
			var showDataList = [];
			orignClassList.forEach((dayList, i) => {
				if (dayList.length == 0) {
					showDataList.push([
						{
							class: 'col-item item-h8 colorWhite',
							text: ''
						}
					]);
				} else {
					var showDay = [];
					var height = 1;
					dayList.forEach((item, j) => {
						debugger
						var color = typeof item == 'object' ? 'colorBlue' : 'colorWhite';
						if (j == dayList.length - 1 || item != dayList[j + 1]) {
							showDay.push({
								text: item.text,
								classroomName: item.classroomName,
								className: item.className,
								teacherName: item.teacherName,
								class: `col-item item-h${height} ${color}`
							});
							height = 1;
						} else {
							height += 1;
						}
					});
					showDataList.push(showDay);
				}
			});
			this.body.showClassList = showDataList;
		}
	},
	components: {
		pickerModule
	}
};
</script>

<style lang="scss" scoped>
// /**
// 1首先需要定义 item-h1到item-h9每个的占位高度（可以按百分比实现，也可以按固定高度，根据原型，我觉得是按固定高度）
// 2，根据colorBlue或者colorWhite设置背景颜色
// */

.tit {
	display: flex;
	padding: 0 40upx;
	justify-content: space-between;
	height: 90upx;
	line-height: 90upx;

	text {
		font-size: 26upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
	}
}

.tableCon {
	padding: 30upx;

	.th {
		width: 100%;

		display: flex;
		justify-content: space-between;

		.first {
			flex: 0 1 60upx !important;
		}

		.th-hr {
			flex: 0 1 118upx;
			border: 5upx solid #fff;

			text {
				display: block;
				font-size: 28upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
				line-height: 40upx;
				text-align: center;
				width: 100%;
			}
		}
	}

	.tBody {
		width: 100%;
		display: flex;
		justify-content: space-between;

		.first {
			flex: 0 1 60upx;
			display: flex;
			flex-direction: column;

			text {
				display: block;
				width: 100%;
				height: 150upx;
				text-align: center;
				line-height: 150upx;
				background-color: #fff !important;
				font-size: 28upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
			}
		}

		.con {
			flex: 0 1 118upx;

			text {
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 30upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: rgba(255, 255, 255, 1);
				border-radius: 8upx;
				border: 5upx solid #fff;
				box-sizing: border-box;
				padding: 6upx;
				text-align: center;
			}

			.item-h1 {
				height: 150upx;
			}

			.item-h2 {
				height: 300upx;
			}

			.item-h3 {
				height: 450upx;
			}

			.item-h4 {
				height: 600upx;
			}

			.item-h5 {
				height: 750upx;
			}

			.item-h6 {
				height: 900upx;
			}

			.item-h7 {
				height: 1050upx;
			}

			.item-h8 {
				height: 1200upx;
			}

			.item-h9 {
				height: 1350upx;
			}

			.item-h10 {
				height: 1500upx;
			}

			.colorBlue {
				background-color: #3c68e6;
			}

			.colorWhite {
				background-color: #fff;
			}
		}
	}
}
</style>
